
<template>
  <div class="WorkManage">
    <div class="topbox">
      <el-form ref="form" :model="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="qiyelist"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="工单编号">
                  <el-input style="width:100%;" clearable v-model="form.code" placeholder="请输入工单编号" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="工单状态">
                  <el-select v-model="form.state" size="small" filterable style="width:100%;" clearable>
                    <el-option label="待提交" value="0" ></el-option>
                    <el-option label="待接单" value="1" ></el-option>
                    <el-option label="待处理" value="2" ></el-option>
                    <el-option label="已完成" value="3" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="填报时间">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="value1"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: right;margin-top: 4px;">
                <el-button type="primary" size="small" @click="gettablelist">查 询</el-button>
                <el-button size="small" @click="chongzhi">重 置</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist()">
        <template #otherbutton>
          <el-button v-show="entity.orgType=='04'" type="primary" size="small" @click="addwork(1)"><i class="el-icon-plus"></i> 新增报修</el-button>
        </template>
      </TopTitle>
      <div class="table">
        <TableColumn  :tableConfig="tableConfig" :issize="iissize"
           :tableData="tableData" ref="tablecolumn">
           <template>
            <el-table-column
            width="150"
            label="图片">
             <template #default="{row}" >
              <div v-if="row.pictureName && Object.keys(row.pictureName).length > 0">
                <div  v-for="fileName in Object.keys(row.pictureName)" :key="fileName" class="text-overflow">
                  <el-button type="text" class="text-overflow" @click="handleButtonClick(fileName, row.pictureName[fileName])">
                    {{ fileName }}
                  </el-button>
                </div>
              </div>
             </template>
            </el-table-column>
            <el-table-column
            prop="stateName"
            label="工单状态">
            </el-table-column>
            <el-table-column
            width="150"
            label="处理图片">
             <template #default="{row}" >
              <div v-if="row.handlePictureName && Object.keys(row.handlePictureName).length > 0">
                <div  v-for="fileName in Object.keys(row.handlePictureName)" :key="fileName" class="text-overflow">
                  <el-button type="text" class="text-overflow" @click="handleButtonClick(fileName, row.handlePictureName[fileName])">
                    {{ fileName }}
                  </el-button>
                </div>
              </div>
             </template>
            </el-table-column>
            <el-table-column
              width="200"
              label="操作">
              <template #default="{row}">
                <el-button type="text" @click="addwork(row.state==0?1:row.state==1?2:row.state==2?3:5,row,true)">浏览</el-button>
                <el-button v-show="row.updateButtonFlag" type="text" @click="updawork(1,row)">修改</el-button>
                <el-button v-show="row.submitButtonFlag" type="text" @click="addwork(2,row)">提交</el-button>
                <el-button v-show="row.deleteButtonFlag" type="text" @click="dellist(row)">删除</el-button>
                <el-button v-show="row.receiveButtonFlag" type="text" @click="jiedan(3,row)">接单</el-button>
                <el-button v-show="row.finishButtonFlag" type="text" @click="chuli(4,row)">处理</el-button>
              </template>
            </el-table-column>

           </template>
        </TableColumn>
        <el-dialog :visible.sync="dialogVisibles" :append-to-body="true">
           <img width="100%" :src="'data:image/jpeg;base64,' + fileData" alt="">
        </el-dialog>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="gettablelist"
            :total="totalCount"
            :page-size="10"
          >
          </el-pagination>
      </div>
      <workdialog ref="workdialogrefs" :qiyelist="qiyelist" @getlist="gettablelist"></workdialog>
    </div>
  </div>
</template>
<script>
import {exportexcel} from '@/utils/excel'
import {getUserNoApi} from '@/api/companyRegister.js'
import { getworklistapi, getworkcodeapi ,postdeletelistapi,getgeytoimgapi} from '@/api/system/WorkManage'
import { getzidianxialaapi } from '@/api/guidelines'
import workdialog from './workdialog.vue'
import TableColumn from '@/components/Table'
import TopTitle from '@/components/TopTitle/newtitle'
import { getuserlistapi } from '@/api/analysis'
export default {
  name: 'CallPoliceIndex',
  components:{
    TopTitle,
    workdialog,
    TableColumn
  },
  data() {
    return {
      form: {
        orgNo: '',
        code: '',
        state:''
      },
      fileData:'',
      dialogVisibles:false,
      entity:{},
      value1:['',''],
      pageNo: 1,
      pageSize: 10,
      totalCount:0,
      iissize:'medium',
      qiyelist:[],
      tableData:[],
      tableConfig: [
        { label: '序号', type:'index',width:'80' },
        { label: '工单编号', prop: 'code' },
        { label: '业务类型', prop: 'typeName' },
        { label: '工单标题', prop: 'title' },
        { label: '工单描述', prop: 'problemDescription' },
        { label: '优先级别', prop: 'priorityLevelName'},
        { label: '提交人', prop: 'createUserName' },
        { label: '提交企业', prop: 'orgName' },
        { label: '提交时间', prop: 'submitDate' ,center:'center'},
        // { label: '工单状态', prop: 'stateName' ,center:'center'},
      ]
    };
  },

  async mounted() {
    const {data:{list}} = await getuserlistapi()
    this.qiyelist = list
    // this.gettime()
    this.gettablelist()
    const { data: { entity } } = await getUserNoApi()
    this.entity=entity
  },

  methods: {
    async gettablelist() { 
      this.$refs.tablecolumn.loading=true
      const { data: { list,totalCount } } = await getworklistapi({ ...this.form, pageNo: this.pageNo-1, pageSize: this.pageSize, fromDate: this.value1[0], toDate: this.value1[1] })
      this.tableData=list
      this.totalCount=totalCount
      this.$refs.tablecolumn.loading=false
    },
    // 产看图片
    async handleButtonClick(id,name) {
      const {data:{entity}} = await getgeytoimgapi(name)
      this.fileData=entity.fileData
      this.dialogVisibles=true
    },
    //新增
    async addwork(val, row, flag) {
      if (flag) this.$refs.workdialogrefs.flag = flag
      if(row) return this.$refs.workdialogrefs.tijiao(row,val)
       
      this.$refs.workdialogrefs.getadd(this.entity,val)
    },
    // 接单
    jiedan(val, row) {
      this.$refs.workdialogrefs.tijiao(row, val)
      this.$refs.workdialogrefs.jiedans(this.entity)
    },
    // 处理
    chuli(val, row) { 
      this.$refs.workdialogrefs.tijiao(row, val)
      this.$refs.workdialogrefs.chulis(this.entity)
    },
    // 修改
    updawork(val, row) {
      this.$refs.workdialogrefs.updaworks(val, row)
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
    // 导出
    async daochu() {
      exportexcel('/pio-microservice-biz/pio/repair/work/order/exportExcel',{
         ...this.form, fromDate: this.value1[0], toDate: this.value1[1] 
      },'工单管理')
    },
    chongzhi() {
      this.form = { orgNo: '', code: '', state: '' }
      this.value1 = ['', '']
      this.gettablelist()
    },
    // 删除
    dellist(row){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await postdeletelistapi(row.id).then(res => {
              if (res.code == '200') this.gettablelist()
              this.$message({
                type: res.code == '200' ? 'success' : 'warning',
                message: res.code == '200' ? '删除成功':res.message
              })
             })
          } catch (e) {
            console.log(e)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取当前时间戳
    gettime () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 日
      this.$set(this,'value1',[year + '-' + month + '-' + '01',year + '-' + month + '-' + day])
    }
  },
};
</script>
<style lang="scss" scoped>
.WorkManage{
  height:100%;
  padding:10px;
  .topbox{
    height:80px;
    padding:20px;
    background-color:#fff;
    margin-bottom:10px;
  }
  .bodybox{
    height:calc(100% - 90px);
    background-color:#fff;
    padding:20px;
    .table{
      height:90%;
      .text-overflow {
            white-space: nowrap; /* 强制文本在一行内显示，不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
            width: 120px;
        }
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>